<template>

    <!--顶部新增、查询-->
    <div style="margin-bottom: 10px;">
        <el-button type="primary" style="margin-right: 10px;" @click= "AddSupplierClick">新增供应商</el-button>
        <el-input v-model="SupplierSearchInput" style="width: 240px" placeholder="按供应商编号搜索" :prefix-icon="Search"/>
    </div>
  
    <!--供应商数据展示表格-->
    <el-table :data="displaySupplierData" style="width: 100%" highlight-current-row>
        <el-table-column fixed prop="supplierId" label="供应商ID" align="center"/>
        <el-table-column prop="supplierName" label="供应商名称" align="center"/>
        <el-table-column prop="supplierPhone" label="联系电话" align="center"/>
        <el-table-column prop="supplierAddress" label="地址"  align="center"/>
        <el-table-column prop="supplierState" label="合作状态" align="center"/>
        <el-table-column fixed="right" label="操作" min-width="100" align="center">
            <template #default="scope">
                <el-button size="small" @click="EditSupplierClick(scope.row)">
                    修改
                </el-button>
                <el-button size="small" type="danger" @click="DeleteSupplierClick(scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>

        <template #empty>
            <el-empty description="暂无供应商数据" />
        </template>
    </el-table>

    <!-- 删除对话框 -->
    <el-dialog v-model="DeleteSuppliereDialog" title="删除供应商" width="500">
        <span>是否确定删除该供应商？</span><br>
        <span>供应商ID: {{ RowSupplierData.supplierId }}</span><br>
        <span>供应商名称: {{ RowSupplierData.supplierName }}</span>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="DeleteSuppliereDialog = false">取消</el-button>
            <el-button type="primary" @click="DeleteSupplier">确定</el-button>
        </div>
        </template>
    </el-dialog>

  <!-- 修改对话框 -->
    <el-dialog v-model="EditSupplierDialog" title="修改供应商" width="500">
        <el-form :model="PutSupplierData">
        <el-form-item label="供应商名称">
            <el-input v-model="PutSupplierData.supplierName" />
        </el-form-item>
        <el-form-item label="联系电话">
            <el-input v-model="PutSupplierData.supplierPhone" />
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="PutSupplierData.supplierAddress" type="textarea" />
        </el-form-item>
        <el-form-item label="合作状态">
            <el-select v-model="PutSupplierData.supplierState" placeholder="请选择状态">
            <el-option label="合作中" value="合作中" />
            <el-option label="已终止" value="已终止" />
            </el-select>
        </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="EditSupplierDialog = false">取消</el-button>
            <el-button type="primary" @click="editSupplier">确定</el-button>
        </div>
        </template>
    </el-dialog>

    <!-- 新增对话框 -->
    <el-dialog v-model="AddSupplierDialog" title="新增供应商" width="500">
        <el-form :model="PostSupplierData">
        <el-form-item label="供应商名称">
            <el-input v-model="PostSupplierData.supplierName" />
        </el-form-item>
        <el-form-item label="联系电话">
            <el-input v-model="PostSupplierData.supplierPhone" />
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="PostSupplierData.supplierAddress" type="textarea" />
        </el-form-item>
        <el-form-item label="合作状态">
            <el-select v-model="PostSupplierData.supplierState" placeholder="请选择状态">
            <el-option label="合作中" value="合作中" />
            <el-option label="已终止" value="已终止" />
            </el-select>
        </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="AddSupplierDialog = false">取消</el-button>
            <el-button type="primary" @click="addSupplier">确定</el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup name='Supplier'>

// 导入必要组件
import axios from 'axios';
import { reactive, ref, computed, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// 生命周期钩子，组件挂载后初始化数据
onMounted(async () => {
  await GetSuppliers()
})

// 对话框显示参数
const DeleteSuppliereDialog = ref(false)
const EditSupplierDialog = ref(false)
const AddSupplierDialog = ref(false)

// 表格单行供应商数据
let RowSupplierData = reactive({
    supplierId: 0,
    supplierName: '',
    supplierPhone: '',
    supplierAddress: '',
    supplierState: ''
})

// 表单验证
function validateForm(formData: any) {
  if (!formData.supplierName?.trim()) {
    ElNotification({ title: '错误', message: '供应商名称必填', type: 'error' })
    return false
  }
  return true
}

// 添加供应商回调
function AddSupplierClick() {

    // 重置新增表单数据
    Object.assign(PostSupplierData, {
        supplierId: 0,
        supplierName: '',
        supplierPhone: '',
        supplierAddress: '',
        supplierState: ''
    })

    // 打开对话框
    AddSupplierDialog.value = true
}

// 修改供应商回调
async function EditSupplierClick(row: any) {

    // 请求数据
    try {

        // 存储当前行ID
        RowSupplierData.supplierId = row.supplierId

        // 发送GET请求获取供应商详细信息
        const response = await axios.get(`/api/supplier/${row.supplierId}`)

        // 将获取的数据复制到编辑表单
        console.log(response.data)
        Object.assign(PutSupplierData, response.data.data)
        console.log(PutSupplierData)
        EditSupplierDialog.value = true
    } catch (error) {
        ElNotification({ title: '错误', message: '获取供应商信息失败', type: 'error' })
    } 
}

// 删除供应商回调
function DeleteSupplierClick(row: any) {

    // 保存行数据
    RowSupplierData = row

    // 打开对话框
    DeleteSuppliereDialog.value = true
}

// GET ------------------------------------------ GET //

// GET: 获取的供应商数据
const originalSupplierData = ref([])

// 计算属性：根据搜索条件过滤数据
const displaySupplierData = computed(() => {
    if (!SupplierSearchInput.value.trim()) {
        return originalSupplierData.value
    }
    
    const searchValue = SupplierSearchInput.value.trim().toLowerCase()
    return originalSupplierData.value.filter(item => {
        return item.supplierId.toString().toLowerCase().includes(searchValue)
    })
})

// GET: 获取供应商数据
async function GetSuppliers() {
    try {
        const response = await axios.get("/api/supplier")
        originalSupplierData.value = response.data.data || []
        console.log(originalSupplierData.value)
    } catch (error) {
        ElNotification({ 
            title: '错误', 
            message: '获取供应商列表失败'+error, 
            type: 'error' 
        })
    }
}

// 输入框接收到的供应商编号
const SupplierSearchInput = ref('')

// 随时查询（改为前端过滤）
watch(
    SupplierSearchInput, 
    () => {
        // 前端过滤，不发送请求
    }
)

// POST ------------------------------------------ POST //

// POST: 添加的供应商数据
const PostSupplierData = reactive({
    supplierId: 0,
    supplierName: '',
    supplierPhone: '',
    supplierAddress: '',
    supplierState: ''
})

// POST: 添加供应商数据
async function addSupplier() {

    // 表单检验
    if (!validateForm(PostSupplierData)){return}

    // 发送请求
    try {
        await axios.post("/api/supplier", PostSupplierData)
        ElNotification({ title: '成功', message: '新增成功', type: 'success' })
        await GetSuppliers()
    } catch (error) {
        ElNotification({ title: '错误', message: '新增失败', type: 'error' })
    }

    // 关闭对话框
    AddSupplierDialog.value = false
}

// PUT ------------------------------------------ PUT //

// PUT: 修改的供应商数据
const PutSupplierData = reactive({
    supplierId: 0,
    supplierName: '',
    supplierPhone: '',
    supplierAddress: '',
    supplierState: ''
})

// PUT: 修改供应商数据
async function editSupplier() {

    // 表单检验
    if (!validateForm(PutSupplierData)){return}

    // 发送请求
    try {
        await axios.put(`/api/supplier/${PutSupplierData.supplierId}`, {
        supplierName: PutSupplierData.supplierName,
        supplierPhone: PutSupplierData.supplierPhone,
        supplierAddress: PutSupplierData.supplierAddress,
        supplierState: PutSupplierData.supplierState
        })
        ElNotification({ title: '成功', message: '修改成功', type: 'success' })
        await GetSuppliers()
    } catch (error) {
        ElNotification({ title: '错误', message: '修改失败', type: 'error' })
    }

    // 关闭对话框
    EditSupplierDialog.value = false
}

// DELETE ------------------------------------------ DELETE //

// DELETE: 删除供应商数据
async function DeleteSupplier() {
    try {
        await axios.delete(`/api/supplier/${RowSupplierData.supplierId}`)
        ElNotification({ title: '成功', message: '删除成功', type: 'success' })
        await GetSuppliers()
    } catch (error) {
        ElNotification({ title: '错误', message: '删除失败', type: 'error' })
    }
    DeleteSuppliereDialog.value = false
}

</script>

<style scoped>

/* 表格居中设置 */
.el-table-column {
    text-align: center;
}

</style>    